import { useDark, useToggle } from "@vueuse/core";
import { StyleProvider } from "@varlet/ui";
import { ref, watchEffect } from "vue";

import dark from "./dark";
import light from "./light";

/**
 * 启用主题色配置，可以判断是否暗黑模式以及切换暗黑模式的方法
 * @returns
 */
export const useTheme = () => {
  const isDark = useDark({ initialValue: "auto" });
  const theme = ref(isDark.value ? dark : light);

  const toggleDark = useToggle(isDark);
  StyleProvider(light);
  theme.value = light;
  // // 监听 isDark，切换主题色
  // watchEffect(() => {
  //   // 函数式切换主题
  //   StyleProvider(isDark.value ? dark : light);
  //   theme.value = isDark.value ? dark : light;
  // });

  return { isDark, toggleDark, theme };
};
